/*
 * @Description: 类型选择
 * @Author: Zzt
 * @Date: 2023-01-07 18:54:36
 * @LastEditTime: 2023-02-10 16:44:39
 */

import { useEffect, useState } from 'react';
import { Menu, Select } from 'antd';
import classNames from 'classnames/bind';
import type { IArchiveType } from '@/interfaces/archiveType';
import type { IFond } from '@/interfaces/fond';

import styles from '../styles/index.module.scss';
import { useDetectionTemplateContext } from '../contexts/DetectionTemplateContext';

const cx = classNames.bind(styles);

const { Option } = Select;

export interface IUFAChangeCallback {
  fondId: number;
  fondItem: IFond;
  atId: number;
  atItem: IArchiveType;
}
const MouldType = ({ onChange }: any) => {
  const { typeStatusList } = useDetectionTemplateContext();
  // 选中的档案类型id
  const [selectId, setSelectId] = useState(1);

  /**
   * @description: 切换档案类型
   * @param {any} param1
   */
  const onSelect = ({ key }: any) => {
    console.log('key', key);
    onChange(parseInt(key, 10));
    setSelectId(parseInt(key, 10));
  };

  return (
    <div className={cx('container')}>
      <h6 className={cx('at-header')}>类型列表</h6>
      <div className={cx('at-list-wrap')}>
        <Menu
          items={typeStatusList}
          selectedKeys={[`${selectId}`]}
          onSelect={onSelect}
          style={{ width: 200 }}
        ></Menu>
      </div>
    </div>
  );
};
export default MouldType;
